<template>
	<div class="article">
		<div class="info" style="
        overflow: hidden;
        margin-bottom: 20px;
        padding: 20px;
        background: #fff;
        box-shadow: 0 2px 5px 0 hsla(0, 0%, 57%, 0.1);
        transition: all 0.6s ease;
        width: 75%;margin: 0 auto;
      ">
				<div class="article-title" style="
          margin-bottom: 15px;
          font-weight: 700;
          font-size: 18px;
          cursor: pointer;
        ">
					{{ contest && contest.name }}
				</div>

			<div class="article-content" v-html="brief"></div>
			
				<div class="article-cover " align="center">
					<img :src=contest.logo alt="logo"
					style="width: auto;height: auto;max-width: 72%;max-height: 72%; "/>
				</div>
			<label v-html="contest.intro"></label>
			<el-collapse style="margin-top:2rem;">
				<el-collapse-item title="竞赛成果">
			<h4></h4>
				<div v-for="item in achievementList" :key="item">
					<el-button type="text"
					v-if="item.check=='通过'&&item.contest==contest.name"
					@click="gotoAchievement(item._id)">{{item.name}}</el-button>
				</div>
				</el-collapse-item>
			</el-collapse>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			id: {}
		},
		data() {
			return {
				contest: {
					logo:'',
					intro:'',
					name:'',
					id:''
				},
				achievementList:[]
			}
		},
		methods:{
			async fetch() {
				const res1 = await this.$http.get(`rest/contests/${this.id}`)
				const res2 = await this.$http.get(`rest/achievement`)
				this.achievementList = res2.data
				this.contest = res1.data
				console.log(res2.data)
				console.log(this.id)
			},
			async gotoAchievement(id){
				this.$router.push(`/achievement/${id}`)
			}
		},
		created() {
			this.id && this.fetch()
		}
	};
</script>

<style>
	.article {
		display: flex;
		padding: 10px 0;
		/*border-bottom: 1px solid #dbdbdb;*/
	}

	.article-title {
		font-size: 16px;
		font-weight: 500;
		color: #000000;
		text-align: justify;
	}

	.article-time {
		/*margin: 10px 0;*/
		color: #c5c5c5;
	}

	.article-content,
	.article-author,
	.article-category,
	.article-view,
	.article-time {
		font-size: 13px;
		color: #999;
	}

	.article-cover {
		flex: none;
		
	}
</style>
